Frontend PWA -taustatehtävien ajoitus: offline-työn hallinta

Progressiiviset verkkosovellukset (PWA) ovat mullistaneet verkon tarjoamalla natiivisovellusten kaltaisia kokemuksia, mukaan lukien offline-ominaisuudet. Hyvin suunnitellun PWA:n keskeinen osa on kyky hallita tehtäviä taustalla, silloinkin kun käyttäjä on offline-tilassa. Tämä blogikirjoitus tutkii erilaisia tekniikoita taustatehtävien ajoituksen toteuttamiseksi frontend PWA -sovelluksissa, mahdollistaen vankan offline-työn hallinnan ja parannetun käyttökokemuksen.

Taustatehtävien ajoituksen tarpeellisuus

Yhteyksien maailmassa pidämme usein internetyhteyttä itsestäänselvyytenä. Yhteydet voivat kuitenkin olla epäluotettavia, katkonaisia tai olemattomia, erityisesti tietyillä maantieteellisillä alueilla tai matkustaessa. PWA:t vastaavat tähän haasteeseen antamalla käyttäjien jatkaa sovelluksen käyttöä myös offline-tilassa. Taustatehtävien ajoitus on olennaista seuraavissa tilanteissa:

• Datan synkronointi: Datan synkronointi PWA:n ja palvelimen välillä, kun käyttäjä saa taas yhteyden. Tämä sisältää offline-tilassa kerätyn datan (esim. lomakkeiden lähetykset, kuvat) lataamisen palvelimelle ja päivitetyn sisällön lataamisen sovellukseen.
• Viivästetyt tehtävät: Sellaisten tehtävien suorittaminen, jotka eivät vaadi välitöntä käyttäjän vuorovaikutusta, kuten analytiikkadatan lähettäminen tai monimutkaisten laskutoimitusten suorittaminen.
• Sisällön esihakeminen: Resurssien lataaminen taustalla suorituskyvyn parantamiseksi ja sisällön saatavuuden varmistamiseksi offline-tilassa.

Taustatehtävien ajoituksen ydinteknologiat

Useat teknologiat ja API:t ovat keskeisiä taustatehtävien ajoituksen toteuttamisessa PWA-sovelluksissa:

1. Service Worker

Service Worker on PWA:n offline-ominaisuuksien ydin. Se toimii välityspalvelimena verkkosovelluksen ja verkon välillä, kaapaten verkkopyyntöjä ja tarjoten välimuistista vastauksia offline-tilassa. Se mahdollistaa myös taustatehtävät seuraavien kautta:

• Tapahtumankuuntelijat: Kuuntelee tapahtumia, kuten install, activate, fetch ja sync.
• Cache API: Resurssien tallentaminen ja noutaminen selaimen välimuistiin.
• Background Sync API: Tehtävien ajoittaminen suoritettavaksi, kun käyttäjä saa taas verkkoyhteyden.

2. IndexedDB

IndexedDB on asiakaspuolen NoSQL-tietokanta, jonka avulla PWA:t voivat tallentaa rakenteellista dataa offline-tilassa. Se sopii erinomaisesti sellaisen datan tallentamiseen, joka täytyy synkronoida myöhemmin palvelimen kanssa.

3. Background Sync API

Background Sync API:n avulla Service Worker voi rekisteröidä tehtäviä, jotka tulisi suorittaa, kun selain havaitsee verkkoyhteyden. Tämä on erityisen hyödyllistä datan synkronoinnissa, joka on luotu tai jota on muokattu offline-tilassa.

4. Periodic Background Sync API

Periodic Background Sync API, joka on Background Sync API:n laajennus, mahdollistaa säännöllisten tehtävien ajoittamisen taustalla suoritettavaksi, vaikka sovellusta ei aktiivisesti käytettäisikään. Tämä on hyödyllistä tehtävissä, kuten uusimpien uutisotsikoiden hakemisessa tai sääennusteen päivittämisessä.

5. Background Fetch API

Background Fetch API:n avulla Service Worker voi ladata suuria tiedostoja taustalla, vaikka käyttäjä siirtyisi pois sivulta. Tämä on hyödyllistä sisällön esihakemisessa tai resurssien lataamisessa offline-käyttöä varten.

Taustatehtävien ajoituksen toteutus: vaiheittainen opas

Tässä on käytännön opas taustatehtävien ajoituksen toteuttamiseen PWA:ssa Background Sync API:n avulla:

Vaihe 1: Rekisteröi Service Worker

Ensin, rekisteröi Service Worker pää-JavaScript-tiedostossasi:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker rekisteröity skoopilla:', registration.scope);
    })
    .catch(function(err) {
      console.log('Service Workerin rekisteröinti epäonnistui:', err);
    });
}

            

              
                Copy
              
            
          

Vaihe 2: Kaappaa verkkopyynnöt Service Workerissa

`service-worker.js`-tiedostossasi kaappaa verkkopyynnöt ja tarjoa välimuistista vastauksia offline-tilassa:

            
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Välimuistiosuma - palauta vastaus
        if (response) {
          return response;
        }

        // Ei välimuistissa - hae verkosta
        return fetch(event.request).then(
          function(response) {
            // Tarkista, saimmeko kelvollisen vastauksen
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // TÄRKEÄÄ: Kloonaa vastaus. Vastaus on stream
            // ja koska haluamme sekä välimuistin että sovelluksen käyttävän sitä,
            // meidän on kloonattava se.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

Vaihe 3: Tallenna data offline-tilaan IndexedDB:hen

Kun käyttäjä on offline-tilassa, tallenna data IndexedDB:hen. Esimerkiksi, tallennetaan lomakkeen lähetykset:

            
function saveFormDataOffline(formData) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Virhe avattaessa tietokantaa');
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore('submissions', { autoIncrement: true });
      objectStore.createIndex('timestamp', 'timestamp', { unique: false });
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const submission = {
        data: formData,
        timestamp: Date.now()
      };
      const addRequest = objectStore.add(submission);

      addRequest.onsuccess = () => {
        resolve('Data tallennettu offline-tilaan');
      };

      addRequest.onerror = () => {
        reject('Virhe tallennettaessa dataa offline-tilaan');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

            

              
                Copy
              
            
          

Vaihe 4: Rekisteröi Background Sync -tehtävä

Rekisteröi taustasynkronointitehtävä datan synkronoimiseksi, kun käyttäjä saa taas yhteyden:

            
function registerSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.sync.register('sync-form-data');
  }).then(function() {
    console.log('Taustasynkronointi rekisteröity!');
  }).catch(function(error) {
    console.log('Taustasynkronoinnin rekisteröinti epäonnistui: ', error);
  });
}

            

              
                Copy
              
            
          

Vaihe 5: Kuuntele Sync-tapahtumaa Service Workerissa

`service-worker.js`-tiedostossasi kuuntele `sync`-tapahtumaa ja synkronoi data:

            
self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-form-data') {
    event.waitUntil(syncFormData());
  }
});

function syncFormData() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Virhe avattaessa tietokantaa');
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = () => {
        const submissions = getAllRequest.result;
        if (submissions.length > 0) {
          // Lähetä data palvelimelle
          Promise.all(submissions.map(submission => sendDataToServer(submission.data)))
            .then(() => {
              // Tyhjennä IndexedDB
              const clearRequest = objectStore.clear();
              clearRequest.onsuccess = () => {
                resolve('Data synkronoitu ja tyhjennetty');
              };
              clearRequest.onerror = () => {
                reject('Virhe tyhjennettäessä IndexedDB:tä');
              };
            })
            .catch(error => {
              reject('Virhe lähetettäessä dataa palvelimelle: ' + error);
            });
        } else {
          resolve('Ei synkronoitavaa dataa');
        }
      };

      getAllRequest.onerror = () => {
        reject('Virhe haettaessa dataa IndexedDB:stä');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

function sendDataToServer(data) {
  // Korvaa tämä omalla API-päätepisteelläsi
  const apiUrl = '/api/submit-form';

  return fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(response => {
    if (!response.ok) {
      throw new Error('Verkkovastaus ei ollut ok');
    }
    return response.json();
  });
}

            

              
                Copy
              
            
          

Periodic Background Sync API:n käyttö

Periodic Background Sync API on hyödyllinen tehtävissä, jotka on suoritettava säännöllisesti, kuten uusimpien uutisten hakeminen tai sääennusteen päivittäminen. Näin sitä käytetään:

Vaihe 1: Tarkista tuki

Tarkista ensin, tukeeko selain Periodic Background Sync API:a:

            
if ('periodicSync' in registration) {
  // Periodic Background Sync API on tuettu
} else {
  console.log('Periodic Background Sync API ei ole tuettu');
}

            

              
                Copy
              
            
          

Vaihe 2: Pyydä lupa

Sinun on pyydettävä käyttäjältä lupa Periodic Background Sync API:n käyttöön:

            
navigator.permissions.query({ name: 'periodic-background-sync' })
  .then((status) => {
    if (status.state === 'granted') {
      // Säännöllistä taustasynkronointia voidaan käyttää
    } else {
      console.log('Säännöllisen taustasynkronoinnin lupaa ei myönnetty');
    }
  });

            

              
                Copy
              
            
          

Vaihe 3: Rekisteröi säännöllinen synkronointitehtävä

Rekisteröi säännöllinen synkronointitehtävä Service Workerissa:

            
registration.periodicSync.register('update-news', {
  minInterval: 24 * 60 * 60 * 1000, // 1 päivä
}).then(() => {
  console.log('Säännöllinen taustasynkronointi uutisten päivittämiseksi rekisteröity');
}).catch((error) => {
  console.error('Säännöllisen taustasynkronoinnin rekisteröinti epäonnistui: ', error);
});

            

              
                Copy
              
            
          

Vaihe 4: Käsittele säännöllinen synkronointitapahtuma

Käsittele `sync`-tapahtuma Service Workerissa suorittaaksesi säännöllisen tehtävän:

            
self.addEventListener('sync', (event) => {
  if (event.tag === 'update-news') {
    event.waitUntil(updateNews());
  }
});

function updateNews() {
  // Hae uusimmat uutiset palvelimelta
  return fetch('/api/news')
    .then(response => response.json())
    .then(news => {
      // Tallenna uutiset IndexedDB:hen
      return storeNewsInIndexedDB(news);
    })
    .catch(error => {
      console.error('Virhe uutisten päivittämisessä: ', error);
    });
}

            

              
                Copy
              
            
          

Virheenkäsittely ja parhaat käytännöt

Taustatehtävien ajoituksen toteuttaminen vaatii huolellista virheenkäsittelyä ja parhaiden käytäntöjen noudattamista:

• Uudelleenyritysmekanismit: Toteuta uudelleenyritysmekanismit eksponentiaalisella viiveellä epäonnistuneille tehtäville.
• Idempotenssi: Varmista, että tehtävät ovat idempotentteja, mikä tarkoittaa, että niiden suorittaminen useita kertoja tuottaa saman tuloksen kuin niiden suorittaminen kerran. Tämä on tärkeää datan korruptoitumisen estämiseksi uudelleenyritysten yhteydessä.
• Akun optimointi: Ole tietoinen akun kulutuksesta, kun ajoitat taustatehtäviä. Vältä toistuvia tehtäviä, jotka voivat kuluttaa akkua nopeasti.
• Käyttäjäilmoitukset: Anna käyttäjälle palautetta taustatehtävien tilasta, erityisesti jos ne liittyvät datan synkronointiin.
• Turvallisuusnäkökohdat: Tallenna arkaluontoiset tiedot turvallisesti IndexedDB:hen ja suojaudu XSS-haavoittuvuuksilta (cross-site scripting).
• Testaus: Testaa taustatehtävien ajoituksen toteutus perusteellisesti erilaisissa verkko-olosuhteissa ja selainympäristöissä.

Kansainvälistämiseen ja lokalisointiin liittyviä huomioita

Kun kehitetään PWA-sovelluksia maailmanlaajuiselle yleisölle, on tärkeää ottaa huomioon kansainvälistäminen (i18n) ja lokalisointi (l10n):

• Kielituki: Tue useita kieliä ja anna käyttäjien valita haluamansa kieli.
• Päivämäärän ja ajan muotoilu: Käytä eri alueille sopivia päivämäärä- ja aikamuotoja.
• Numeroiden muotoilu: Käytä eri alueille sopivia numeromuotoja, mukaan lukien desimaalierottimet ja tuhaterottimet.
• Valuutan muotoilu: Näytä valuutta-arvot oikeilla symboleilla ja muotoiluilla eri alueille.
• Käännökset: Käännä kaikki käyttäjälle näkyvä teksti tuetuille kielille.
• Oikealta vasemmalle (RTL) -tuki: Tue RTL-kieliä, kuten arabiaa ja hepreaa.

Kirjastot, kuten i18next ja Moment.js, voivat auttaa yksinkertaistamaan kansainvälistämistä ja lokalisointia PWA-sovelluksessasi.

Esimerkkejä todellisista PWA-sovelluksista, jotka käyttävät taustatehtävien ajoitusta

Useat todelliset PWA-sovellukset hyödyntävät taustatehtävien ajoitusta tarjotakseen saumattomia offline-kokemuksia:

• Google Docs: Mahdollistaa dokumenttien luomisen ja muokkaamisen offline-tilassa, synkronoiden muutokset, kun yhteys palautuu.
• Twitter Lite: Antaa käyttäjien kirjoittaa ja lähettää twiittejä offline-tilassa, ladaten ne palvelimelle, kun yhteys on taas käytettävissä.
• Starbucks: Antaa käyttäjien tehdä tilauksia offline-tilassa, jotka lähetetään, kun yhteys on saatavilla.
• AliExpress: Mahdollistaa tuotteiden selaamisen ja ostoskoriin lisäämisen offline-tilassa, ja synkronointi tapahtuu yhteyden palatessa.

Yhteenveto

Taustatehtävien ajoitus on nykyaikaisten PWA-sovellusten kriittinen osa, joka mahdollistaa vankan offline-työn hallinnan ja parantaa käyttökokemusta. Hyödyntämällä teknologioita, kuten Service Workereita, IndexedDB:tä ja Background Sync API:a, kehittäjät voivat luoda PWA-sovelluksia, jotka tarjoavat saumatonta ja luotettavaa toiminnallisuutta jopa ilman verkkoyhteyttä. Kun PWA:t kehittyvät edelleen, taustatehtävien ajoituksen hallitseminen on olennaista todella mukaansatempaavien ja maailmanlaajuisesti saavutettavien verkkosovellusten rakentamisessa. Muista priorisoida virheenkäsittely, akun optimointi ja käyttäjäpalaute luodaksesi hiotun ja käyttäjäystävällisen kokemuksen monipuoliselle maailmanlaajuiselle yleisölle.